{% extends 'base.html' %}
{% block title %}PersistentVolumes{% endblock %}
{% block nav-item-1 %}layui-nav-itemed{% endblock %}
{% block nav-this-1-3 %}layui-this{% endblock %}
{% block content %}
<span class="layui-breadcrumb">
      <a href="#">首页</a>
      <a href="#">Kubernetes</a>
      <a href="#">PersistentVolumes</a>
      <a><cite>创建</cite></a>
    </span>
<hr>

<div class="layui-card">
    <div class="layui-card-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>创建PersistentVolume</legend>
        </fieldset>
        <form class="layui-form " onclick="return false">
            <div class="layui-form-item">

                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">存储容量：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="capacity" value="1Gi" title="1Gi" checked="">
                        <input type="radio" name="capacity" value="5Gi" title="5Gi">
                        <input type="radio" name="capacity" value="10Gi" title="10Gi">
                        <input type="radio" name="capacity" value="20Gi" title="20Gi" >
                        <input type="radio" name="capacity"  title="自定义" disabled="">
                    </div>
                </div>

                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">访问模式：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="access_mode" value="ReadWriteMany" title="多节点读写" checked="">
                        <input type="radio" name="access_mode" value="ReadOnlyMany" title="多节点只读">
                        <input type="radio" name="access_mode" value="ReadWriteOnce" title="单节点读写">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">存储类型：</label>
                    <div class="layui-input-inline">
                        <select name="storage_class">
                            <option value=""></option>
                            <optgroup label="单点存储(适合非核心业务)">
                                <option value="nfs">NFS</option>
                            </optgroup>
                            <optgroup label="分布式存储(暂不支持)">
                                <option value="cephfs">CephFS</option>
                                <option value="cephrbd">CephRBD</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

                <div style="padding-left: 30px">
                    <label class="layui-form-label">服务器IP：</label>
                    <div class="layui-input-block">
                        <select name="server_ip"  lay-verify="required" lay-search="" lay-filter="select_ns2">
                            <option value="">直接选择或搜索选择</option>
                            <option value="192.168.31.62">192.168.31.62</option>
                            <option value="192.168.31.63">192.168.31.63</option>
                        </select>
                    </div>
                    <label class="layui-form-label">挂载路径：</label>
                    <div class="layui-input-block">
                        <input type="text" name="mount_path" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="示例：pv0001" autocomplete="off" class="layui-input">
                    </div>

                </div>

                <br>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </div>
        </form>

    </div>
</div>


{% endblock %}

{% block js %}
<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;

        // 监听提交
        form.on('submit(btn)', function (data) {
            data = data.field;
            csrf_token = $('[name="csrfmiddlewaretoken"]').val();
            data['csrfmiddlewaretoken'] = csrf_token;
            $.ajax({
                url: '{% url 'pv_api' %}',
                type: "POST",
                data: data,
                headers: {"X-CSRFToken": csrf_token},
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 6});
                        window.location.href = "{% url 'pv' %}"
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function () {
                    layer.msg("服务器接口异常",{icon: 5})
                }
            })
        })

    });
</script>

{% endblock %}